<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />

    <title>钢琴原创谱系统</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/todoList.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        body {
            background: #4a5075 !important;
            display: flex;
            align-items: center;
        }

        .piano-box {
            max-width: none;
            /* max-width: 1200px; */
            width: 90%;
            height: 80%;
            background: #080f2b;
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: .5px 5px 20px #303656;
        }

        .piano-left {
            width: 80px;
            height: 95%;
            background: #151e4c;
            border-radius: 70px;
            margin-left: 2%;
            box-sizing: border-box;
            padding: 40px 20px;
            text-align: center;
            padding-top: 20px;
        }

        .piano-left ul {
            margin-top: 90px;
        }

        .piano-left ul li {
            margin-bottom: 50px;
        }

        .piano-left ul li:hover span {
            color: #fff;
        }

        .piano-left ul li span {
            color: #333f6c;
        }

        .piano-left ul li.active span {
            color: #007bff !important;
        }

        .piano-con {
            width: 69%;
            height: 90%;
            margin-left: 2%;
            color: #fff;
            overflow: hidden;
        }

        .piano-con .con-txt {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 20px;
        }

        .piano-con .flex-box {
            color: #5c6580;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 3%;
        }
        .pu-list{
            display: flex;
        }
        .pu-list img{
            width: 90%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .pu-list li{
            width: 25%;
            font-size: 14px;
            text-align: center;
        }
        .course-list {
            margin-top: 20px;
            background: #151e4c;
           
        }

        .course-list li {
            width: 22%;
            height: 2%;
            background: #ccc;
            float: left;
            margin: 10px;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content:flex-end;
            cursor: pointer;
        }

        .course-list li:nth-child(1) {
            background: #2078ec;
        }
        .course-list li:nth-child(2) {
            background: #f18f00;
        }
        .course-list li:nth-child(3) {
            background: #1d9ec2;
        }
        .course-list li:nth-child(4) {
            background: #f25d98;
        }
        .piano-right{
            width: 20%;
            height: 90%;
            margin-left: 2%;
            margin-right: 1%;
            color: #fff;
            position: relative;
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
        }
        .icon-bofang{
            font-size: 2em;
        }
        #prevMonth, #nextMonth{
            vertical-align: middle;
        }
        .game-list{
            display: flex;
            flex-direction: row;
        }
        .game-list li p{
            font-size: 14px;
        }
        .game-list li {
            margin-right: 20px;
            display: flex;
            flex-direction:row;
            width: 20%;
        }
        .game-list img{
            width: 50px;
            border-radius: 5px;
            margin-right: 10%;
        }
        .tx-box img{
            width: 30px;
            height: 30px;
            border-radius: 100%;
            margin-right: 10px;
        }
        .preloader{
            position: fixed;
            width: 100%;
            height: 100%;
            background: #4a5075;
            z-index: 100;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction:column;
        }
        .preloader span{
            animation: pulse 5s infinite
        }
        @keyframes pulse {
            0% {
                opacity: .5
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: .5
            }
        }
    </style>
</head>

<body>
    <div class="preloader">
        <p><span class="icon iconfont icon-Icons-piano" style="font-size: 9em;color: #000; background: #fff; border-radius: 100%; display: inline-block; padding: 10px;"></span></p>
    </div>
    <div class="logo"></div>
    <div class="piano-box">
        <div class="piano-left">
            <p><span class="icon iconfont icon-Icons-piano"
                    style="font-size: 30px;color: #000; background: #fff; border-radius: 100%; display: inline-block; padding: 3px;"></span></p>
            <ul>
                <li class="active"><span class="icon iconfont icon-shouye" style="font-size: 30px;"></span></li>
                <li><span class="icon iconfont icon-tongzhi" style="font-size: 30px; "></span></li>
                <li><span class="icon iconfont icon-shezhi" style="font-size: 30px;"></span></li>
            </ul>
        </div>
        <div class="piano-con">
            <div class="con-txt">
                您好 欢迎进入"钢琴原创谱系统"
                <div style="float: right" class="tx-box">
                    <span style="display: inline-block; font-size: 30px; margin-right: 10px; vertical-align: top;" class="icon iconfont icon-chaxun"></span>
                    <img src="./images/tx.jpeg">
                </div>
            </div>
            <div class="flex-box">
                <div class="txt">
                    <p>今日使用时长 <span style="margin-left: 0;" id="hours">0</span>小时<span id="minutes">0</span>分钟<span
                            id="seconds">0</span>秒</p>
                    </p>
                </div>
            </div>
            <div style=" overflow: hidden; overflow-y: auto; height:calc(100% - 25%);">
                <p>
                    <span class="icon iconfont icon-liebiaomoshi" style="display: inline-block; margin-right: 5px;"></span>功能分类
                </p>
                <ul class="course-list">
                    <li onclick="window.location.href='free.html'">
                        <p><span class="icon iconfont icon-bofang"></span></p>
                        <p style="font-weight: bold; margin-bottom: 2px;">自由弹奏</p>
                        <p style="font-size: 12px;color: rgba(255,255,255,0.6);">10人在线</p>
                    </li>
                    <li onclick="window.location.href='knowledge.html'">
                        <p><span class="icon iconfont icon-bofang"></span></p>
                        <p style="font-weight: bold; margin-bottom: 2px;">即兴知识充电</p>
                        <p style="font-size: 12px;color: rgba(255,255,255,0.6);">10人在线</p>
                    </li>
                    <li onclick="window.location.href='course.html'">
                        <p><span class="icon iconfont icon-bofang"></span></p>
                        <p style="font-weight: bold; margin-bottom: 2px;">课程中心</p>
                        <p style="font-size: 12px;color: rgba(255,255,255,0.6);">10人在线</p>
                    </li>
                    <li onclick="window.location.href='spectrumList.html'">
                        <p><span class="icon iconfont icon-bofang"></span></p>
                        <p style="font-weight: bold; margin-bottom: 2px;">谱例列表</p>
                        <p style="font-size: 12px; color: rgba(255,255,255,0.6);">10人在线</p>
                    </li>
                </ul>
                <div style="clear: both;"></div>
                <div style="margin-top: 2%; margin-bottom: 2%;">
                    <span class="icon iconfont icon-liebiaomoshi" style="display: inline-block; margin-right: 5px;"></span> 音乐游戏
                    <div style="float: right;"><span style=" transform: rotate(180deg);font-size:30px;" class="icon iconfont icon-zuojiantoushixinxiao"></span></div>
                    <div style="float: right;"><span style="font-size:30px;" class="icon iconfont icon-zuojiantoushixinxiao"></span></div>
                </div>
                <ul class="game-list" style="margin-bottom: 2%;">
                    <li>
                        <img src="./images/game1.png" alt="">
                        <div>
                            <p>欢唱房间</p>
                            <p style="color: rgba(255,255,255,0.2); margin-top: 3px;">10人在线</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/game2.png" alt="">
                        <div>
                            <p>瀑布留弹奏</p>
                            <p style="color: rgba(255,255,255,0.2);margin-top: 3px;">10人在线</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/game3.png" alt="">
                        <div>
                            <p>Ai生成伴奏</p>
                            <p style="color: rgba(255,255,255,0.2);margin-top: 3px;">10人在线</p>
                        </div>
                    </li>
                </ul>
                <div style="clear: both;"></div>
                <div style="margin-top: 30px; margin-bottom: 2%;">
                    <span class="icon iconfont icon-liebiaomoshi" style="display: inline-block; margin-right: 5px;"></span> 谱例列表
                    <div style="float: right;"><span style=" transform: rotate(180deg);font-size:30px;" class="icon iconfont icon-zuojiantoushixinxiao"></span></div>
                    <div style="float: right;"><span style="font-size:30px;" class="icon iconfont icon-zuojiantoushixinxiao"></span></div>
                </div>
                <ul class="pu-list">
                    <li>
                        <img src="./images/pu01.png">
                        <p style="font-weight: bold; margin-bottom: 2px;">修炼爱情</p>
                    </li>
                    <li>
                        <img src="./images/pu01.png">
                        <p style="font-weight: bold; margin-bottom: 2px;">修炼爱情</p>
                    </li>
                    <li>
                        <img src="./images/pu01.png">
                        <p style="font-weight: bold; margin-bottom: 2px;">修炼爱情</p>
                    </li>
                    <li>
                        <img src="./images/pu01.png">
                        <p style="font-weight: bold; margin-bottom: 2px;">修炼爱情</p>
                    </li>
                </ul>
                <div style="clear: both;"></div>
            </div>
            
        </div>
        <div class="piano-right">
            <div class="container">
                <div class="calendar">
                    <!-- <h2>当前日期 <span id="selectedDate"></span></h2> -->
                    <span id="prevMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; color: #bbb;"></span></span>
                    <span id="currentMonthYear" style="vertical-align: middle;"></span>
                    <span id="nextMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; transform: rotate(180deg); display: inline-block;color: #bbb;"></span></span>
                    <table>
                        <thead>
                            <tr>
                                <th>日</th>
                                <th>一</th>
                                <th>二</th>
                                <th>三</th>
                                <th>四</th>
                                <th>五</th>
                                <th>六</th>
                            </tr>
                        </thead>
                        <tbody id="calendarBody"></tbody>
                    </table>
                </div>
                <div class="plan">
                    <!--深蓝到浅蓝背景过渡的进度条，进度条的底色是灰色-->
                    <h3>任务 <span style="float: right;"><span id="completedPlans"></span>/<span id="totalPlans"></span></span>
                    </h3>
                    <div id="progress-bar">
                        <div id="progress-bar-inner"></div>
                    </div>
                    <!-- <form id="planForm"> -->
                        <!-- <input type="text" id="planTitle" placeholder="标题">
                        <textarea id="planDescription" placeholder="描述"></textarea> -->
                        <button class="add-plan"><span class="icon iconfont icon-add" style="font-size: 30px;"></span></button>
                    <!-- </form> -->
                    <div class="plan-list" id="planList"></div>
                    <div class="data-no"><img src="./images/noDataBg.png" style="width: 200px;"><span style="display: block;">暂无计划</span></div>
                </div>
            </div>
        </div>
    </div>

    <!--计划弹窗-->
    <div class="popup-container">
        <div class="popup">
            <div class="popup-header">
                <h2>计划</h2>
                <span class="close">&times;</span>
            </div>
            <div class="popup-body">
                <form id="planForm">
                    <input type="text" id="planTitle" placeholder="标题">
                    <textarea id="planDescription" placeholder="描述" style="height: 100px;resize:none"></textarea>
                    <button class="save-plan">保存</button>
                </form>
            </div>
        </div>
    </div>

    <!--云朵背景图-->
    <!-- <div class="cloud-box"></div> -->
    <script src="./js/jquery.js"></script>
    <script src="./js/todoList.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/public.js"></script>
    <script>
        $(".preloader").fadeTo(3000,0.5,function(){
            $(".preloader").remove()
        })
    </script>
</body>

</html>